<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">消缺任务管理</el-breadcrumb-item>
            <el-breadcrumb-item>消缺查询</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <!--搜索区-->
            <el-form ref="form">
                <el-row :gutter="10">
                    <div>
                        <el-col :span="2" class="task">任务编号:</el-col>
                        <el-col :span="4">
                            <el-input></el-input>
                        </el-col>
                    </div>

                    <div>
                        <el-col :span="2" class="task">任务状态:</el-col>
                        <el-col :span="4">
                            <el-select v-model="value1" placeholder="请选择">
                                <el-option
                                        v-for="item in options1"
                                        :key="item.value1"
                                        :label="item.label1"
                                        :value="item.value1">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>

                    <div>
                        <el-col :span="2" class="task">缺陷类型:</el-col>
                        <el-col :span="4">
                            <el-select v-model="value2" placeholder="请选择">
                                <el-option
                                        v-for="item in options2"
                                        :key="item.value2"
                                        :label="item.label"
                                        :value="item.value2">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>

                    <div>
                        <el-col :span="2" class="task">缺陷级别:</el-col>
                        <el-col :span="4">
                            <el-select v-model="value3" placeholder="请选择">
                                <el-option
                                        v-for="item in options3"
                                        :key="item.value3"
                                        :label="item.label"
                                        :value="item.value3">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                </el-row>

                <el-row :gutter="10">
                    <div>
                        <el-col :span="2" class="task">工作单据:</el-col>
                        <el-col :span="4">
                            <el-select v-model="value4" placeholder="请选择">
                                <el-option
                                        v-for="item in options4"
                                        :key="item.value4"
                                        :label="item.label"
                                        :value="item.value4">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                </el-row>

                <el-row :gutter="20" class="time_row">

                    <div>
                        <el-col :span="2" class="task">下发时间</el-col>
                    </div>
                    <div>
                        <el-form-item>
                            <el-col :span="4">
                                <el-date-picker type="date" placeholder="选择日期"
                                                style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="1">to</el-col>
                            <el-col :span="4">
                                <el-date-picker type="date" placeholder="选择日期"
                                                style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col :span="4" class="button">
                                <el-button type="primary" size="medium" icon="el-icon-search">查询</el-button>
                            </el-col>

                            <el-col :span="4" class="button1">
                                <el-button type="primary" size="medium" icon="el-icon-search">打印</el-button>
                            </el-col>
                        </el-form-item>
                    </div>
                </el-row>
            </el-form>

            <!--主体区-->
            <el-table :data="bug" border stripe>
                <el-table-column label="任务编号" prop="task_id"></el-table-column>
                <el-table-column label="路线编号" prop="circuit_id"></el-table-column>
                <el-table-column label="杆塔编号" prop="tower_id"></el-table-column>
                <el-table-column label="缺陷级别" prop="Defect_levels"></el-table-column>
                <el-table-column label="缺陷类型" prop="defect_type" width="100px"></el-table-column>
                <el-table-column label="发现人员" prop="People_Finder" width="150px"></el-table-column>
                <el-table-column label="发现时间" prop="discovery" width="100px"></el-table-column>

                <el-table-column label="下发人员" prop="issued_staff" width="150px"></el-table-column>
                <el-table-column label="下发时间" prop="issued_time" width="100px"></el-table-column>


                <el-table-column label="完好率" prop="serviceability_rate"></el-table-column>
                <el-table-column label="缺陷描述" prop="description" width="150px"></el-table-column>

            </el-table>

            <!--分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
        </el-card>

    </div>
</template>

<script>
    export default {
        data(){
            return{
                /*获取用户列表的参数对象, 分页*/
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 2
                },
                total: 0,

                /*多选框数据*/
                options1: [{
                    value1: '1',
                    label: '待分配'
                }, {
                    value1: '2',
                    label: '已分配'
                }, {
                    value1: '3',
                    label: '执行中'
                }, {
                    value1: '4',
                    label: '已完成'
                }],
                value1: '',

                options2: [{
                    value2: '1',
                    label: '叉粱断裂'
                }, {
                    value2: '2',
                    label: '拦河线断裂'
                }, {
                    value2: '3',
                    label: '绝缘子爆破'
                }, {
                    value2: '4',
                    label: '杆塔倾斜'
                }],
                value2: '',

                options3: [{
                    value3: '1',
                    label: '一般'
                }, {
                    value3: '2',
                    label: '严重'
                }, {
                    value3: '3',
                    label: '紧急'
                }],
                value3: '',

                options4: [{
                    value4: '1',
                    label: '任务单据'
                }, {
                    value4: '2',
                    label: '第一种单据'
                }, {
                    value4: '3',
                    label: '第二种单据'
                }],
                value4: '',

                bug:[]
            }
        },
        created() {
            this.getList()
        },
        methods:{
            getList() {
                this.axios.get('bug.json').then((res) => {
                    this.bug = res.data.result
                    this.total = res.data.total
                })
            }
        }

    }
</script>

<style scoped lang="less">
    .task {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .el-row {
        margin-top: 10px;
    }

    .button {
        position: absolute;
        left: 870px;
    }
    .button1{
        position: absolute;
        left: 970px;
    }
</style>
